<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="赵鹤阳">
    <title>改变路径</title>
    <style>
        main {
            width: 650px;
            height: 770px;
            margin: 80px auto;
            border: 1px solid red;
            border-radius: 10px;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul li img {
            width: 150px;
            height: 140px;
            border: 1px solid red;
            border-radius: 10px;
            float: right;
            margin: 5px 5px;
        }

        .main-no {
            width: 460px;
            height: 450px;
            margin: 5px 10px;
            border: 1px solid red;
            border-radius: 10px;
            float: left;
        }

        .main-no img {
            width: 460px;
            height: 445px;
        }
    </style>

</head>

<body>
    <main>
        <div class="main-no">
            <img src="img/020bfd309f6c5de539a47989f6d43b0b.jpeg" alt="">
        </div>
        <div class="main-img">
            <ul>
                <li><img src="img/020bfd309f6c5de539a47989f6d43b0b.jpeg" alt=""></li>
                <li><img src="img/0d489a98e1adde828b72d192b2e4d07f.jpeg" alt=""></li>
                <li><img src="img/0e67d418ad66638bbe6a84103ede6c68.jpg" alt=""></li>
                <li><img src="img/146cd6673de0269f1e2aaf71012a084f.gif" alt=""></li>
                <li><img src="img/3d6b268b1a4b3fff579b0826a869017b.jpg" alt=""></li>
                <li><img src="img/198dc3711355b5653e02e198383c8736.jpg" alt=""></li>
                <li><img src="img/4c66da82de172dbe6a41d6ea45882267.png" alt=""></li>
                <li><img src="img/c0c66ad6f28ca464f0ffa01e81420c3e.jpg" alt=""></li>
                <li><img src="img/c330008e9f6b80b832e23655625d7b42.jpg" alt=""></li>
                <li><img src="img/d876f1dd7797f0ab3f46151d0bd37e31.png" alt=""></li>
                <li><img src="img/1e393a7dd11b4cc463c37e0d9f530f91.jpg" alt=""></li>
            </ul>
        </div>
    </main>
</body>

</html>
<script>
    var lis = document.querySelectorAll('.main-img li');
    var change = document.querySelector('.main-no img');
    var showImg = ["img/020bfd309f6c5de539a47989f6d43b0b.jpeg", "img/0d489a98e1adde828b72d192b2e4d07f.jpeg",
        "img/0e67d418ad66638bbe6a84103ede6c68.jpg", "img/146cd6673de0269f1e2aaf71012a084f.gif", "img/3d6b268b1a4b3fff579b0826a869017b.jpg",
        "img/198dc3711355b5653e02e198383c8736.jpg", "img/4c66da82de172dbe6a41d6ea45882267.png", "img/c0c66ad6f28ca464f0ffa01e81420c3e.jpg",
        "img/c330008e9f6b80b832e23655625d7b42.jpg", "img/d876f1dd7797f0ab3f46151d0bd37e31.png", "img/1e393a7dd11b4cc463c37e0d9f530f91.jpg"]
    var index = 0;
    for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onmouseover = function () {
            // console.log(this.index);
            change.src = showImg[this.index];
        }

    }

</script>